<script>
  import { spring } from "svelte/motion";
  //   import { cubicOut } from "svelte/easing";

  const add10 = () => {
    val += 0.1;
    progress.set(val);
  };
  const reduce10 = () => {
    val -= 0.1;
    progress.set(val);
  };

  const springConfig = {
    stiffness: 0.1,
    damping: 0.1,
    mass: 1,
    restSpeed: 0.01,
    restDelta: 0.01,
    velocity: 0,
    timeConstant: 1000,
  };

  let val = 0;
  const progress = spring(val, springConfig);
</script>

<main>
  <h1>Spring动画</h1>
  <progress value={$progress}></progress>
  <p>
    <button on:click={add10}>+0.1</button>
  </p>
  <p>
    <button on:click={reduce10}>-0.1</button>
  </p>
</main>
